
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>YUI Loader - Dynamically Adding YUI and External Modules</title>

<style type="text/css">
/*margin and padding on body element
  can introduce errors in determining
  element position and are not recommended;
  we turn them off as a foundation for YUI
  CSS treatments. */
body {
	margin:0;
	padding:0;
}
</style>

<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" />
<script type="text/javascript" src="../../build/yui/yui-debug.js"></script>


<!--begin custom header content for this example-->
<!-- In this style block, we override some of the css styles for the calendar.
     We will use the 'insertBefore' config to make the loader insert the css
     node before our style block so that our styles will be applied in the
     correct order. -->
<style type="text/css" id="styleoverrides">
#cal1Cont {
    background-color:#004C6D;
}

#cal1Cont div.calheader {
    cursor: move;
}

#cal1Cont .yui-calendar {
    width:auto;
    background-color:transparent;
}

#cal1Cont .yui-calendar tr, #cal1Cont .yui-calendar th {
    background-color:transparent;
    vertical-align:middle;
    text-transform:none;
    color:#fff;
}

#cal1Cont .yui-calendar a:hover {
    text-decoration:none;
}

#results {
    background-color:#8DD5E7;
    border:1px solid black;
    position: absolute;
    top: 15px;
    right: 5px;
    width: 300px;
}
</style>

<!--end custom header content for this example-->

</head>

<body class=" yui-skin-sam">

<h1>YUI Loader - Dynamically Adding YUI and External Modules</h1>

<div class="exampleIntro">
	<p>This example uses the dynamic loading capability built into YUI to
pull in additional components as needed.  In addition, it demonstrates
how to define external modules that can be loaded alongside YUI.
</p>
<p>This example works as follows:</p>
<ol>
<li>A <code>YUI</code> instance is created with a configuration object that defines parameters we need to dynamically load new modules.</li>
<li><code>node</code> is used so that we can bind an event listener to a button.  YUI will dynamically fetch <code>node</code> and its
dependencies.  By default, these dependencies will be fetched from the Yahoo! CDN and will be combined into a single file.</li>
<li>A click listener is added to a button.</li>
<li>When this button is clicked, YUI will dynamically fetch 3.x Drag &amp; Drop and 2.x Calendar files.  
The CSS file will be fetched first; this helps prevent a flash of unstyled content when the
Calendar Control is loaded.  This file is inserted above a style block which contains our custom calendar styles (via a YUI config option) so that styles are applied in the correct order.</li>
<li>A Calendar instance is created, and it is made draggable.</li>
</ol>
			
</div>

<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->


<input id="button1" type="button" value="Click to load YUI Calendar" class="button" />

<div id="cal1Cont"></div>

<script>

YUI({base:"../../build/", timeout: 10000, insertBefore: 'styleoverrides', modules: { 'yui2-yde': { fullpath: 'http://yui.yahooapis.com/2.5.2/build/yahoo-dom-event/yahoo-dom-event.js' }, 'yui2-calendar': { fullpath: 'http://yui.yahooapis.com/2.5.2/build/calendar/calendar-min.js', requires: ['yui2-yde', 'yui2-calendarcss'] }, 'yui2-calendarcss': { fullpath: 'http://yui.yahooapis.com/2.5.2/build/calendar/assets/skins/sam/calendar.css', type: 'css' } }}).use('node', function(Y, result) {

    // The callback supplied to use() will be executed regardless of
    // whether the operation was successful or not.  The second parameter
    // is a result object that has the status of the operation.  We can
    // use this to try to recover from failures or timeouts.
    if (!result.success) {

        Y.log('Load failure: ' + result.msg, 'warn', 'Example');

    } else {

        // Add a button click listener to load the calendar
        var handle = Y.on('click', function(e) {

            // dynamically load the 2.x calendar and 3.x drag and drop
            Y.use('dd-drag', 'yui2-calendar', function(Y) {
                var cal1 = new YAHOO.widget.Calendar('cal1', 'cal1Cont');

                // Once the 2.x calendar renders, we will add 3.x drag
                // functionality to it.
                cal1.renderEvent.subscribe(function() {
                    var dd = new Y.DD.Drag({
                        node: '#cal1Cont'
                    }).addHandle('div.calheader');
                });
                cal1.render();
            });

            // Remove the button click listener so that we only try to
            // load the calendar control once.
            handle.detach();

        }, '#button1');
    }


});
</script>

<!--END SOURCE CODE FOR EXAMPLE =============================== -->

</body>
</html>
